<template>
  <div class="app-container clue1-page">

    <!-- 搜索表单区域 -->
    <el-form
      :inline="true"
      :model="searchForm"
      class="form-search"
      size="small"
      style="margin-top:20px"
    >
      <el-form-item>
        <el-input v-model="searchForm.colName" placeholder="藏品名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="searchForm.colId"
          placeholder="藏品编号"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="searchForm.year"
          placeholder="请选择年代"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in yearList"
            :key="index"
            :label="item.yearName"
            :value="item.yearName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" icon="el-icon-search" @click="getAllRegister">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格区域 -->
    <el-table v-loading="loading" :data="tableData" border stripe style="width: 100%">
      <el-table-column
        type="selection"
        width="55"
      >
      </el-table-column>
      <el-table-column
        type="index"
        width="50"
      >
      </el-table-column>
      <el-table-column prop="colId" label="藏品登记号"></el-table-column>
      <el-table-column prop="colName" label="藏品名称"></el-table-column>
      <el-table-column prop="gradeId" label="藏品级别"></el-table-column>
      <el-table-column prop="type" label="藏品类型"></el-table-column>
      <el-table-column prop="number" label="藏品数量"></el-table-column>
      <el-table-column prop="quality" label="藏品质量"></el-table-column>
      <el-table-column prop="come" label="藏品来源"></el-table-column>
      <el-table-column prop="status" label="保存状态"></el-table-column>
      <el-table-column prop="yearId" label="年代"></el-table-column>
      <el-table-column prop="colDesc" label="藏品描述"></el-table-column>
      <el-table-column prop="intime" label="入藏时间"></el-table-column>
      <!--  -->
      <el-table-column align="center" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            type="primary"
            plain
            size="small"
            @click="check(scope.row.id)"
          >
            审核
          </el-button>
          <el-button
            type="primary"
            plain
            size="small"
            @click="showDetailDialog(scope.row.id)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <div class="pagination-warp">
      <el-pagination
        :current-page="current"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <ClueAddDialog></ClueAddDialog>
    <el-dialog
      class="myclue-detail"
      title="审核信息"
      width="30%"
      :visible.sync="timeline.dialogVisible"
      @open="open"
    >
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :icon="activity.icon"
          :type="activity.type"
          :color="activity.color"
          :size="activity.size"
          hide-timestamp
        >
          <h4>{{ activity.content }}</h4>
          <p>{{ activity.time }}</p>
          <p>{{ activity.user }}</p>
          <p>{{ activity.desc }}</p>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script>
  import {
    ConfirmcommitCol,
    getAllThreeRegister,
    getOthers,
    clueInfo
  } from '@/api/clue/dataReference';
  import ClueAddDialog from '../components/Form';
  export default {
    components: { ClueAddDialog },
    data() {
      return {
        yearList: [],
        loading: false, // 加载遮罩
        dialogAddVisible: false,
        tableData: [], // 表格数据
        current: 1, // 当前页
        limit: 10, // 一页几个
        total: 0, // 总数
        searchForm: {
          colId: '',
          colName: '',
          year: ''
        },
        activeIndex: '0',
        timeline: {
          currentClueId: '',
          dialogVisible: false
        },
        activities: []
      };
    },
    created() {
      this.getAllRegister();
      this.getOthers();
    },
    methods: {
      async showDetailDialog(clueId) {
        this.timeline.currentClueId = clueId;
        this.timeline.dialogVisible = true;
        this.getCLueInfo();
      },
      async getCLueInfo() {
        const { data: res } = await clueInfo(this.timeline.currentClueId);
        const activities = res.data.activities;
        // 写的过滤数据的垃圾代码
        const arr = [
          { content: '初次审核' },
          { content: '最终审核' },
          { content: '审核完成' }
        ];
        for (let i = 0; i < activities.length; i++) {
          if (activities[i].clueUser) {
            arr[i].time = activities[i].clueTime;
            arr[i].user = '处理人：' + activities[i].clueUser;
            arr[i].desc = '意见：' + activities[i].desc;
          }
          const status = activities[i].status;
          if (status === -1) {
            arr[i].type = 'danger';
            arr[i].size = 'large';
          } else if (status === 0) {
            // 看看上一个是不是未审核
            if (
              i !== 0 &&
              (activities[i - 1].status === 0 || activities[i - 1].status === -1)
            ) {
              continue;
            } else {
              arr[i].type = 'primary';
              arr[i].size = 'large';
              arr[i].icon = 'el-icon-more';
            }
          } else if (status === 1) {
            arr[i].type = 'success';
          }
        }
        this.activities = arr;
      },
      check(id) {
        this.$prompt('请输入建议', '审核', {
          distinguishCancelAndClose: true,
          confirmButtonText: '同意',
          cancelButtonText: '拒绝',
          cancelButtonClass: 'el-button--danger',
          inputValidator: val => {
            this.commitDesc = val;
            return true;
          }
        })
          .then(async ({ value }) => {
            const { data: res } = await ConfirmcommitCol({
              id: id,
              desc: value,
              status: 1
            });
            if (res.code === 200) {
              this.getAllRegister();
              this.$message({
                type: 'success',
                message: res.message
              });
            }
          })
          .catch(async (action, instance) => {
            if (action !== 'cancel') return;
            console.log(action, instance);
            const { data: res } = await ConfirmcommitCol({
              id: id,
              desc: this.commitDesc,
              status: -1
            });
            if (res.code === 200) {
              this.getAllRegister();
              this.$message({
                type: 'success',
                message: res.message
              });
            }
          });
      },
      reset() {
        this.searchForm = {
          roleId: null,
          userName: '',
          userPhone: ''
        };
      },
      async getOthers() {
        const { data: res } = await getOthers();
        console.log(res);
        if (res.code === 200) {
          this.yearList = res.data.yearList;
        } else {
          this.$message.error('下拉框获取失败');
        }
      },
      /**
       * 处理分页修改
       */
      handleSizeChange(val) {
        this.limit = val;
      },
      handleCurrentChange(val) {
        this.current = val;
      },
      handleClick() {},
      /**
       * 获取全部线索
       */
      async getAllRegister() {
        this.loading = true;
        const { data: res } = await getAllThreeRegister(
          this.current,
          this.limit,
          this.searchForm
        );
        console.log('api=获取全部线索', res);
        this.tableData = res.data.ClueList;
        this.total = res.data.total;
        this.loading = false;
      },
      /**
       * 重置查询
       */
      resetSearch() {
        this.searchForm = {
          roleId: null,
          userName: '',
          userPhone: ''
        };
      }
    }
  };
</script>

<style lang="scss">
  .form-search {
    .el-input {
      width: 180px;
    }
  }
</style>

<style lang="scss" scoped>
  .clue1-page {
    .pagination-warp {
      margin-top: 20px;
      position: relative;
      .el-pagination {
        position: absolute;
        right: 0;
        top: 0;
      }
    }

    .el-table {
      margin-top: 10px;
    }

    .btn-box {
      display: flex;
      justify-content: space-between;
    }

    .demo-table-expand {
      font-size: 0;
    }
    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
  }
</style>
